<template>
	<view>
		<!-- 头部 -->
		<view class="head">
			<view class="head-top">
				<text class="big">2.48</text>
				<text class="small">七日年化收益率(%)</text>
			</view>
			<view class="head-bottom">
				<text class="big">0.6709</text>
				<text class="small">万分收益(02-26)</text>
			</view>
			<view class="head-bottom">
				<text class="big">100.00</text>
				<text class="small">起购金额</text>
			</view>
		</view>
		<!-- 主体 -->
		<view class="main">
			<view class="title"><text>七日年化收益曲线</text></view>
			<view class="lineChart">
				<!-- 线形图 -->
				<view class="charts-box">
				  <qiun-data-charts
				    type="line"
				    :chartData="chartData"
				    background="none"
				  />
				</view>
				
				<view class="lineChart-bot">
					<text :class="{blue:item.id == chartsPoint}"
					v-for="item in charts" :key='item.id' @click="chart(item.id)">{{item.text}}</text>
				</view>
			</view>
			<!-- 分页抬头 -->
			<view class="paging">
				<text :class="{blue:index == selected}" v-for="(item,index) in paging" :key='item.id'
				@click="selecteds(index)">{{item.text}}</text>
			</view>
			<!-- 分页 -->
			<swiper class="swiper" :current="selected" @change="centerindex" :class="swi">
				<!-- 基金档案 -->
				<swiper-item class="swiper-fund">
					<view class="basic">
						<text class="basic-title">基本信息</text>
						<view class="basicList" v-for="item in basicList" :key='item.id'>
							<text class="basic-left">{{item.type}}</text>
							<text class="basic-right">{{item.text}}</text>
						</view>
					</view>
					<view class="title"><text>资产配置</text></view>
					<!-- 环状图 -->
					<view class="charts-round">
						<view class="charts-box">
						  <qiun-data-charts type="ring" :chartData="chartData2" background="none"/>
						</view>
					</view>
				
				</swiper-item>
				
				<!-- 交易规则 -->
				<swiper-item class="swiper-details">
					<!-- 购买规则 -->
					<view class="top">
						<text>购买规则</text>
						<uni-steps :options="[{title: 'T日15点前'}, {title: 'T+1日17点后'}, {title: 'T+2日'}, {title: 'T+2日起'}]" :active="-1"></uni-steps>
						<view class="top-list">
							<text>购买</text>
							<text>确认份额</text>
							<text>查看收益</text>
							<text>可赎回</text>
						</view>
						<view class="top-text">
							<text>*T日作为交易日，周末和法定节假日不属于T日。若在节假日或15点后购买，将于下一个T日生效，确认份额等时间点都将顺延一个T日</text>
						</view>
						<view class="top-from" v-for="item in topForm" :key="item.id" :class="{top_blue:item.type}">
							<view class="from-left"><text>{{item.text1}}</text></view>
							<view class="from-right"><text class="text">{{item.text2}}</text><text>{{item.text3}}</text></view>
						</view>
					</view>
					
					<!-- 赎回规则 -->				
					<view class="top">
						<text>赎回规则</text>
						<uni-steps :options="[{title: 'T日15点前'}, {title: 'T+1日17点后'}, {title: 'T+2日'}]" :active="-1"></uni-steps>
						<view class="top-list">
							<text>赎回</text>
							<text class="text">确认份额及到账金额</text>
							<text>24点前到账</text>
						</view>
						<view class="top-text">
							<text>*T日作为交易日，周末和法定节假日不属于T日。若在节假日或15点后购买，将于下一个T日生效，确认份额等时间点都将顺延一个T日</text>
						</view>
						<view class="top-from" v-for="item in bottomForm" :key="item.id" :class="{top_blue:item.type}">
							<view class="from-left"><text>{{item.text1}}</text></view>
							<view class="from-right"><text class="text">{{item.text2}}</text><text>{{item.text3}}</text></view>
						</view>
					</view>
					
					<!-- 运作费用 -->
					<view class="bottom">
						<text>运作费用</text>
						<view class="top-from" v-for="item in lastForm" :key="item.id" :class="{top_blue:item.type}">
							<view class="from-left"><text>{{item.text1}}</text></view>
							<view class="from-right"><text class="text">{{item.text2}}</text><text>{{item.text3}}</text></view>
						</view>
					</view>
				</swiper-item>
				
				<!-- 常见问题 -->
				<swiper-item class="swiper-problem">
					<view class="problem-center">
						<view class="top"><text class="text">什么是基金？</text></view>
						<view class="bottom">
							<text>基金（全称证券投资基金）是一款以组合方式进行投资的集合投资产品。投资人通过购买基金份额的方式，将众多资金集中起来，交由具备专业资质的基金管理人进行资产管理，并依据其持有份额共享利益，共担风险</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 底部字 -->
		<view class="footer-text">
			<text class="text1">基金销售服务由成都宇宁基金销售有限公司提供</text>
			<text class="text2">投资前请详细阅读基金合同，招募说明书。基金的过往业绩不预示其未来表现，市场有风险，投资需谨慎</text>
		</view>
		
		<!-- 底部占位 -->
		<view class="footer-bottom"></view>
		<!-- 底部栏 -->
		<view class="footer">
			<view class="footer-left">
				<image class="img" src="@/static/fundDetails/6674.png" mode=""></image>
				<text class="text">收藏</text>
			</view>
			<view class="footer-left">
				<image class="img" src="@/static/fundDetails/2862.png" mode=""></image>
				<text class="text">圈子</text>
			</view>
			<view class="footer-right right1">
				<text>定投</text>
			</view>
			<navigator url="/pages/purchase/purchase">
				<view class="footer-right right2">
					<text>立即购买</text>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() { 
			return {
				chartData:{
					"categories": [
						"02-01",
						"02-02",
						"02-03",
						"02-04",
						"02-05",
						"02-06",
						"02-07"
					],
					"series": [
						{
							"name": "汇添富双利卷A",
							"data": [
								372.11,
								378.60,
								390.54,
								375.32,
								379.45,
								386.54,
								391.56
							]
						},
						{
							"name": "汇添富双利卷B",
							"data": [
								365.63,
								378.60,
								375.21,
								391.56,
								365.63,
								380.21,
								383.89
							]
						}
					]
				},
				charts:[
					{id:0,text:'分时'},
					{id:1,text:'近一月'},
					{id:2,text:'近半年'},
					{id:3,text:'近一年'},
				],
				chartsPoint:0,
				paging:[
					{id:0,text:'基金档案'},
					{id:1,text:'交易规则'},
					{id:2,text:'常见问题'},
				],
				pagPoint:0,
				basicList:[
					{id:1,type:'基金全称',text:'汇添富双利债券型证券投资基金'},
					{id:2,type:'基金代码',text:'470018'},
					{id:3,type:'基金类型',text:'债券型（低风险）'},
					{id:4,type:'基金状态',text:'开放交易'},
					{id:5,type:'成立日期',text:'2011-01-26'},
					{id:6,type:'基金经理',text:'杨宇宁'},
					{id:7,type:'基金公司',text:'汇添富基金管理股份有限公司'},
				],
				// 环状图
				chartData2:{
					"series": [
						{
							"data": [
								{
									"name": "债券",
									"value": 77.62
								},
								{
									"name": "股票",
									"value": 17.88
								},
								{
									"name": "现金",
									"value": 1.79
								},
							]
						}
					],
					
					"title":{
						name:122.21,
						
					},
				},
				topForm:[
					{id:0,type:true,text1:'金额（元）',text3:'费用'},
					{id:1,type:false,text1:'0≤金额＜100万',text2:'4.5%',text3:"0.6%"},
					{id:2,type:false,text1:'100万≤金额＜200万',text2:'4%',text3:"0.6%"},
					{id:3,type:false,text1:'200≤金额＜500万',text2:'0.3%',text3:"0.3%"},
					{id:4,type:false,text1:'金额≥100万',text2:'4000',text3:"1000"},
				],
				bottomForm:[
					{id:0,type:true,text1:'持有时间',text3:'费用'},
					{id:1,type:false,text1:'7天≤持有时间＜365天',text3:"0.50%"},
					{id:2,type:false,text1:'1年≤持有时间＜2年',text3:"0.25%"},
					{id:3,type:false,text1:'持有时间≥2年',text3:"0.00%"},
					{id:4,type:false,text1:'0天≤持有时间＜7天',text3:"1.5%"},
				],
				lastForm:[
					{id:0,type:false,text1:'管理费',text3:"1.50%"},
					{id:1,type:false,text1:'托管费',text3:"0.25%"},
					{id:2,type:false,text1:'销售服务费',text3:"— —"},
				],
				selected:0,
				swi:'swiper1',
			}
		},
		methods: {
			chart(id){
				this.chartsPoint = id
			},
			selecteds(index){
				this.selected = index;
			},
			centerindex(event){
				this.selected = event.detail.current;
				if(this.selected == 0){
					this.swi = 'swiper1';
				}else if(this.selected == 1){
					this.swi = 'swiper2';
				}else if(this.selected == 2){
					this.swi = 'swiper3';
				}
			},
			
			 
		},
		
		
		
	}
</script>

<style lang="scss" scoped>
	// 头部
	.head{
		width: 750rpx;
		height: 260rpx;
		background-image: url(@/static/fundDetails/4792.png);
		background-repeat: no-repeat;
		background-size: cover;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-content: space-between;
		padding-top: 50rpx;
		padding-bottom: 80rpx;
		.head-top{
			width: 100%;
			text-align: center;
		}
		.big{
			font-size: 60rpx;
			color: #fff;
			font-weight: bold;
			display: block;
			margin-bottom: 15rpx;
		}
		.small{
			font-size: 24rpx;
			color: #fff;
		}
		.head-bottom{
			text-align: center;
			.big{
				font-size: 40rpx;
				margin-bottom: 8rpx;
			}
		}
	}
	// 标题
	.title{
		font-size: 30rpx;
		font-weight: bolder;
		display: flex;
		align-items: center;
		margin: 20rpx 0;
	}
	//标题伪元素
	.title::before{
		content:' ';
		display:block;
		width: 8rpx;
		height: 30rpx;
		border-radius: 6rpx;
		background-color: #3476f1;
		margin-left: 24rpx;
		margin-right: 10rpx;
	}
	// 主体
	.main{
		width: 750rpx;
		transform:translateY(-30rpx);
		background-color: #fff;
		padding-top: 20rpx;
		margin-bottom: -30rpx;
		border-radius: 30rpx 30rpx 0 0;
	}
	.lineChart{
		width: 702rpx;
		height: 570rpx;
		margin: 0 auto;
		padding: 30rpx;
		box-sizing: border-box;
		box-shadow: 0 0 10rpx #f1f1f1;
	}
	//线形图
	.charts-box{
	  width: 100%;
	  height:470rpx;
	}
	.lineChart-bot{
		width: 100%;
		display: flex;
		text{
			text-align: center;
			flex-grow: 1;
			font-size: 32rpx;
			color: #999;
			border: 1px solid #ddd;
			padding: 5rpx 0;
		}
		.blue{
			background-color: #3476f1;
			border: 1px solid #3476f1;
			color: #fff;
		}
	}
	// 分页抬头
	.paging{
		width: 702rpx;
		margin: 0 auto;
		padding: 30rpx 0;
		text{
			margin-right: 60rpx;
			font-size: 24rpx;
			color: #999;
		}
		.blue{
			font-size: 30rpx;
			color: #3476F1;
			font-weight: bold;
			position: relative;
		}
		.blue::before{
			content: " ";
			width: 56rpx;
			height: 8rpx;
			background-color: #3476F1;
			display: block;
			position: absolute;
			left: 34rpx;
			bottom: -15rpx;
		}
	}
	// 分页
	.swiper1{
		height: 1100rpx;
	}
	.swiper2{
		height: 2150rpx;
	}
	.swiper3{
		height: 500rpx;
	}
	.swiper{
		width: 750rpx;
	}
	// 基金详情
	.swiper-fund{
		.basic{
			width: 702rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			box-shadow: 0 0 10rpx #f1f1f1;
			box-sizing: border-box;
			padding: 0 30rpx;
			.basic-title{
				font-size: 28rpx;
				color: #999;
				padding: 30rpx 0;
				display: block;
				width: 100%;
				border-bottom: 1px solid #f1f1f1;
			}
			.basicList{
				width: 100%;
				padding: 20rpx 0;
				border-bottom: 1px solid #f1f1f1;
				.basic-left{
					font-size: 24rpx;
					color: #999;
				}
				.basic-right{
					font-size: 24rpx;
					color: #333;
					margin-left: 30rpx;
				}
			}
		}
		.charts-round{
			width: 702rpx;
			height: 280rpx;
			margin: 0 auto;
			box-shadow: 0 0 10rpx #f1f1f1;
			box-sizing: border-box;
		}
		.charts-box{
			 height: 100%;
			 width: 100%;
		}
		
	}
	//交易规则
	.swiper-details{
		color: #999;
		.top{
			width: 702rpx;
			height: 850rpx;
			margin: 20rpx auto;
			padding: 30rpx;
			box-sizing: border-box;
			box-shadow: 0 0 10rpx #f1f1f1;
			font-size: 28rpx;
			border-radius: 15rpx;
			.top-list{
				display: flex;
				text{
					width: 25%;
					text-align: center;
					color: #333;
				}
				.text{
					flex-grow: 1;
				}
			}
			.top-text{
				margin-top: 35rpx;
				font-size: 24rpx;
			}
			.top_blue{
				color: #333;
				font-weight: bold;
				background-color: #eaf1fe;
				margin-top: 20rpx;
			}
			.top-from{
				width: 100%;
				height: 90rpx;
				display: flex;
				font-size: 28rpx;
				text-align: center;
				line-height: 90rpx;
				.from-left{
					width: 60%;
					border: 1rpx solid #f7f7f7;
				}
				.from-right{
					width: 40%;
					border: 1rpx solid #f7f7f7;
					.text{
						font-size: 24rpx;
						text-decoration: line-through;
					}
				}
			}
		}
		.bottom{
			width: 702rpx;
			height: 370rpx;
			margin: 20rpx auto;
			padding: 30rpx;
			box-sizing: border-box;
			box-shadow: 0 0 10rpx #f1f1f1;
			font-size: 28rpx;
			border-radius: 15rpx;
			.top-text{
				margin-top: 35rpx;
				font-size: 24rpx;
			}
			.top-from{
				width: 100%;
				height: 90rpx;
				display: flex;
				font-size: 28rpx;
				text-align: center;
				line-height: 90rpx;
				.from-left{
					width: 60%;
					border: 1rpx solid #f7f7f7;
				}
				.from-right{
					width: 40%;
					border: 1rpx solid #f7f7f7;
					.text{
						font-size: 24rpx;
						text-decoration: line-through;
					}
				}
			}
		}
	}
	.swiper-problem{
		.problem-center{
			width: 702rpx;
			height: 430rpx;
			margin: 25rpx auto;
			box-shadow: 0 0 10rpx #f1f1f1;
			box-sizing: border-box;
			padding: 24rpx;
			.top{
				display: flex;
				justify-content: flex-end;
				.text{
					display: block;
					width: 205rpx;
					height: 90rpx;
					color: #fff;
					background-color: #3476f1;
					line-height: 90rpx;
					text-align: center;
					font-size: 28rpx;
					border-radius: 20rpx;
				}
			}
			.bottom{
				box-sizing: border-box;
				padding: 25rpx 20rpx;
				font-size: 28rpx;
				border: 1rpx solid #f1f1f1;
				margin-top: 40rpx;
			}
		}
	}
	//底部字
	.footer-text{
		width: 702rpx;
		height: 120rpx;
		margin: 20rpx auto;
		color: #999;
		.text1{
			font-size: 24rpx;
			display: block;
		}
		.text2{
			font-size: 22rpx;
		}
	}
	// 底部占位
	.footer-bottom{
		width: 750rpx;
		height: 170rpx;
	}
	// 底部栏
	.footer{
		width: 750rpx;
		height: 170rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		background-color: #fff;
		box-shadow: 0 0 5rpx #a1a1a1;
		.footer-left{
			height: 100rpx;
			width: 130rpx;
			text-align: center;
			padding-top: 10rpx;
			box-sizing: border-box;
			border-right: 1px solid #f1f1f1;
			.img{
				height: 48rpx;
				width: 48rpx;
			}
			.text{
				font-size: 20rpx;
				color: #666;
				display: block;
			}
		}
		.footer-right{
			flex-grow: 1;
			width: 245rpx;
			height: 100rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 28rpx;
			color: #fff;
		}
		.right1{
			background-color: #e2bc7f;
		}
		.right2{
			background-color: #3476f1;
		}
	}
</style>
